<template>
  <div id="main-container">
    <HeaderBanner :key="Math.random() * 100" :notifyCounts="notifyCounts" />
    <languagesComponents />
    <MainBannerComponents
      :key="Math.random() * 100"
      :notifyCounts="notifyCounts"
    />
  </div>
</template>
  <script>
import HeaderBanner from "@/components/HeaderBanner.vue";
import languagesComponents from "@/components/Setting/languagesComponents.vue";
import MainBannerComponents from "@/components/MainBannerComponents.vue";

export default {
  name: "Setting_LanguageView",
  components: {
    HeaderBanner,
    languagesComponents,
    MainBannerComponents,
  },
  data() {
    return {
      current_user_id: JSON.parse(localStorage.getItem("user")).user_id
        ? JSON.parse(localStorage.getItem("user")).user_id
        : 1,
      notifyCounts: 0,
    };
  },
  mounted() {
    this.getNotReadNotify();
  },
  methods: {
    //将消息通知通过主页面传递到组件中，减少请求次数
    async getNotReadNotify() {
      let res = await this.$http.post("getNotifyNotRead", {
        current_user_id: this.current_user_id,
      });
      if (res.state == 200) {
        this.notifyCounts = res.data;
      }
    },
  },
};
</script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
#main-container {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

@media screen and (max-width: 720px) {
  #main-container {
    margin-top: 0px !important;
  }
}
</style>